<template>
  <div>
    <div class="newsPolitics">
      <!-- <div class="topTitle">政策资讯</div> -->
      <div v-if="titleTag.length > 0" class="titleTagContent clearfix">
        <div class="MYshadow"></div>
        <div class="titleTag" :style="{'width': 100/titleTag.length + '%'}" v-for="(item, index) in titleTag" :key="index" :class="{'active': index==currentActive, 'is-selected': index == 3}" @click="tabTitleTag(index)">
          {{item}}
          <div class="data-download" v-if="index==3" v-show="showList">
            <div class="triangle"></div>
            <ul>
              <li v-for="(tag, i) in downloadTag" @click.stop="currentActiveList = 3,currentTag = i,showList=false" :key = "i">{{tag}}</li>
            </ul>
          </div>
          <div class="arrow" v-if="index==3" :class="{'down': !showList, 'up': showList}" @click.stop="toggleShowList"></div>
        </div>
      </div>
      <div class="wrapList tag1" v-show="currentActiveList == 0" style="font-size:14px;">
        <div @click="$router.push('/housingSafeguard')">广州市公共租赁住房保障办法</div>
        <div @click="$router.push('/secondItem')">来穗务工人员申请承租市本级公共租赁住房实施细则</div>
        <div @click="$router.push('/threeItem')">广州市新就业无房职工公共租赁住房保障办法</div>
        <div @click="$router.push('/newsPage4')">广州市公共租赁住房轮候和配租实施细则</div>
        <div @click="$router.push('/newsPage5')">广州市保障性住房小区管理扣分办法</div>
        <div @click="$router.push('/newsPage6')">广州市房屋租赁合同网上备案规则</div>
        <div @click="$router.push('/seventhItem')">关于加强户籍家庭住房保障工作的实施意见</div>
        <div @click="$router.push('/eighthItem')">广州市加快发展住房租赁市场工作方案</div>
      </div>
      <div class="wrapList tag2" v-show="currentActiveList == 1">
        <div @click="$router.push('/newsPage21')">《广州市公共租赁住房保障办法》问题解答</div>
        <div @click="$router.push('/newsPage22')">《来穗务工人员申请承租市本级公共租赁住房实施细则》问题解答</div>
        <div @click="$router.push('/newsPage23')">新就业无房职工公共租赁住房申请问题解答</div>
      </div>
      <div class="wrapList tag3" v-show="currentActiveList == 2">
        <div @click="$router.push('/newsPage111')">本市户籍家庭申请承租市本级公共租赁住房办事</div>
        <div @click="$router.push('/newsPage222')">以个人（家庭）名义申请新就业无房职工公共租赁住房办事指南</div>
        <div @click="$router.push('/newsPage333')">广州市住房和城乡建设委员会关于印发《广州市新就业无房职工公共租赁住房保障办法》的通知</div>
      </div>
      <div class="wrapList tag1" v-show="currentActiveList == 3&&currentTag==0">
        <div v-for="(item, index) in dataDownloadOne" :key="index" @click="$router.push(item.url)">{{item.title}}</div>
        <!-- <div v-for="(item, index) in dataDownloadOne" :key="index" @click="$router.push(item.url)">{{item.title}}</div> -->
      </div>
      <div class="wrapList tag2" v-show="currentActiveList == 3&&currentTag==1">
        <!-- <news-list :congestio="item"  v-for="(item, i) in ZJdataList" :key="i" v-if="item.imgurl !== '' && i > 6 && i < 8"></news-list> -->
        <div v-for="(item, index) in dataDownloadTwo" :key="index" >
          <a :href="item.url">{{item.title}}</a>
        </div>
      </div>
      <div class="wrapList tag3" v-show="currentActiveList == 3&&currentTag==2">
        <div v-for="(item, index) in dataDownloadThree" :key="index">
          <a :href="item.url">{{item.title}}</a>
        </div>
        <!-- <news-list :congestio="item"  v-for="(item, i) in ZJdataList" :key="i" v-if="item.imgurl !== '' && i > 6 && i < 8"></news-list> -->
      </div>
      <div class="wrapList" v-show="currentActiveList == 4">
        <a id="news" href="http://www.gz.gov.cn/gzccjg/gzdt/201712/a5cbfb4a588f4c8eb893a2704331c402.shtml" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://www.gz.gov.cn/gzccjg/gzdt/201712/a5cbfb4a588f4c8eb893a2704331c402/images/82001e090c294e5c84d6bca431448a8f.jpg"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">广州市第三家国有住房租赁企业揭牌成立</p>
              <p class="newsLis_rt_body">广州市第三家国有住房租赁企业揭牌成立</p>
            </div>
          </div>
        </a>
        <a id="news" href="http://news.163.com/17/1211/06/D5BT8GP500018AOP.html" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://szajimgs-1254325618.picgz.myqcloud.com/szajimgs/1514106846652936087.png"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">广东工行提供 200亿元支持 广州城投项目</p>
              <p class="newsLis_rt_body">广东工行提供 200亿元支持 广州城投项目</p>
            </div>
          </div>
        </a>
        <a id="news" href="http://news.163.com/17/1121/01/D3NT9CN400014AEE.html" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://szajimgs-1254325618.picgz.myqcloud.com/szajimgs/1514106846652936087.png"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">工商银行5000亿元住房租赁市场建设资金落地</p>
              <p class="newsLis_rt_body">工商银行5000亿元住房租赁市场建设资金落地</p>
            </div>
          </div>
        </a>
        <a id="news" href="http://news.163.com/17/0719/10/CPN05G84000187VE.html" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://cms-bucket.nosdn.127.net/catchpic/9/90/90ef9c658539111ebed26695d8562d9d.jpg?imageView&thumbnail=550x0"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">央媒解读广州“租购同权”新政：房屋租赁时代或到来</p>
              <p class="newsLis_rt_body">央媒解读广州“租购同权”新政：房屋租赁时代或到来</p>
            </div>
          </div>
        </a>
        <a id="news" href="http://www.funxun.com/news/34/20171123100207.html" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://szajimgs-1254325618.picgz.myqcloud.com/szajimgs/1514106840807198280.png"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">三部委再提住房租赁 宅基地改革不以买卖为出发点</p>
              <p class="newsLis_rt_body">三部委再提住房租赁 宅基地改革不以买卖为出发点</p>
            </div>
          </div>
        </a>
        <a id="news" href="http://news.southcn.com/gd/content/2017-11/17/content_178911510.htm" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://www.gz.gov.cn/gzccjg/gzdt/201712/a5cbfb4a588f4c8eb893a2704331c402/images/82001e090c294e5c84d6bca431448a8f.jpg"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">穗首批国有租赁住房企业揭牌 未来将获万亿元支持</p>
              <p class="newsLis_rt_body">穗首批国有租赁住房企业揭牌 未来将获万亿元支持</p>
            </div>
          </div>
        </a>
        <a id="news" href="http://society.people.com.cn/n1/2017/1107/c1008-29630434.html" class="newsCn">
          <div class="newsLis">
            <div class="newsLis_lf"><img src="http://szajimgs-1254325618.picgz.myqcloud.com/szajimgs/1514106844332657292.png"></div>
            <div class="newsLis_rt">
              <p class="newsLis_rt_head">房子如何保障住、防止炒</p>
              <p class="newsLis_rt_body">民生三问·为了人民的美好生活</p>
            </div>
          </div>
        </a>
      </div>
      <!--<div class="bottom-empty"></div>-->
    </div>
  </div>
</template>

<script>
import newsList from './newsList'
export default {
  name: 'newsPolitics',
  components: {
    newsList
  },
  data () {
    return {
      currentActive: 0,
      currentActiveList: 0,
      titleTag: ['政策', '政策解读', '办理指南', '资料下载', '新闻'],
      downloadTag: [ '本市户籍家庭', '新就业无房职工', '来穗务工人员' ],
      dataDownloadOne: [
        // {title: '资料下载说明', url: '/downloadExplain'},
        // {title: '广州市公共租赁住房保障申请表', url: '/dataDownload1_1'},
        // {title: '广州市居民家庭经济状况核对申报表', url: '/dataDownload1_2'}
        {title: '资料下载说明', url: '/downloadExplain'},
        {title: '附件1 广州市公共租赁住房保障申请表', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件1广州市公共租赁住房保障申请表.doc')},
        {title: '附件2 广州市居民家庭经济状况核对申报表', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件2广州市居民家庭经济状况核对申报表.doc')}
      ],
      dataDownloadTwo: [
        {title: '附件3 附件3广州市人才绿卡主卡', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件3广州市人才绿卡主卡.doc')},
        {title: '附件4 广东省直社会保险参保证明（个人）样式', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件4广东省直社会保险参保证明（个人）样式.png')},
        {title: '附件5 工作单位证明', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件5工作单位证明.doc')},
        {title: '附件6 新就业无房职工（个人、家庭）申请公共租赁住房摇号分配指引（2017', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件6新就业无房职工（个人、家庭）申请公共租赁住房摇号分配指引（2017）.pdf')}
      ],
      dataDownloadThree: [
        {title: '附件7《房产评估申报表》（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件7《房产评估申报表》（下载使用）.pdf')},
        {title: '附件8《公共服务领域特殊艰苦岗位工作证明》（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件8《公共服务领域特殊艰苦岗位工作证明》（下载使用）.pdf')},
        {title: '附件9《机动车辆情况申报表》（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件9《机动车辆情况申报表》（下载使用）.pdf')},
        {title: '附件10《收入证明》（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件10《收入证明》（下载使用）.pdf')},
        {title: '附件11《收入证明（农村居民）》（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件11《收入证明（农村居民）》（下载使用）.pdf')},
        {title: '附件12《收入声明书》（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件12《收入声明书》（下载使用）.pdf')},
        {title: '附件13 工作单位证明（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件13工作单位证明（下载使用）.pdf')},
        {title: '附件14 广州市居民家庭经济状况核对申报表（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件14广州市居民家庭经济状况核对申报表（下载使用）.pdf')},
        {title: '附件15 广州志愿服务证明申请表（下载使用）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件15广州志愿服务证明申请表（下载使用）.pdf')},
        {title: '附件16 养老、失业、生育、工伤保险缴费历史明细表（样式浏览，以相关部门实际出具的表单为准）（正面）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件16养老、失业、生育、工伤保险缴费历史明细表（样式浏览，以相关部门实际出具的表单为准）（正面）.png')},
        {title: '附件17 养老、失业、生育、工伤保险缴费历史明细表（样式浏览，以相关部门实际出具的表单为准）（反面）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件17养老、失业、生育、工伤保险缴费历史明细表（样式浏览，以相关部门实际出具的表单为准）（反面）.png')},
        {title: '附件18《广州市计划生育证明》（样式浏览，以相关部门实际出具的表单为准）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件18《广州市计划生育证明》（样式浏览，以相关部门实际出具的表单为准）.pdf')},
        {title: '附件19 个人医疗保险缴费历史汇总表（样式浏览，以相关部门实际出具的表单为准）（1）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件19个人医疗保险缴费历史汇总表（样式浏览，以相关部门实际出具的表单为准）（1）.jpg')},
        {title: '附件20 个人医疗保险缴费历史汇总表（样式浏览，以相关部门实际出具的表单为准）（2）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件20个人医疗保险缴费历史汇总表（样式浏览，以相关部门实际出具的表单为准）（2）.jpg')},
        {title: '附件21《个人历史就业记录》（样式浏览，以相关部门实际出具的表单为准）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件21《个人历史就业记录》（样式浏览，以相关部门实际出具的表单为准）.jpg')},
        {title: '附件22 广州市志愿服务时数证明（样式浏览，以相关部门实际出具的表单为准）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件22广州市志愿服务时数证明（样式浏览，以相关部门实际出具的表单为准）.pdf')},
        {title: '附件23 广州市义务工作者义工服务经历认定证明（样式浏览，以相关部门实际出具的表单为准）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件23广州市义务工作者义工服务经历认定证明（样式浏览，以相关部门实际出具的表单为准）.pdf')},
        {title: '附件24《献血凭证》（样式浏览，以相关部门实际出具的表单为准）', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件24《献血凭证》（样式浏览，以相关部门实际出具的表单为准）.pdf')},
        {title: '附件25来穗务工人员申请公共租赁住房摇号分配指引', url: encodeURI('http://gzzlh5.chudaokeji.com/doc/附件25来穗务工人员申请公共租赁住房摇号分配指引.pdf')}
      ],
      ZJdataList: '',
      currentTag: '',
      showList: false
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$axiosGeting(this.$api.consult).then(res => {
        if (res) this.ZJdataList = [...res.datas]
      })
    },
    tabTitleTag (index) {
      this.currentActive = index
      if (index === 3) {
        this.showList = true
      } else {
        this.currentActiveList = index
        this.showList = false
      }
    },
    toggleShowList () {
      if (this.currentActive === 3) {
        this.showList = !this.showList
      }
    }
  }
}
</script>

<style lang="less" scoped>
body,html{
  background-color:#fff;
  }
  .data-download {
    .active {
      background: #fc9400;
      color: white !important;
      font-weight: bold;
    }
  }
  .MYshadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    box-shadow: 0px 1px 1.0rem rgba(51, 51, 51, 0.2);
  }
  .newsPolitics {
    width: 100%;
    background: #eee;
  }
  .titleTagContent {
    color:#999999;
    font-size: 0.65rem;
    margin-top: 0.85rem;
    position: relative;
  }
  .triangle{
    width:0;
    height:0;
    border-width:0 0.5rem 0.5rem;
    border-style:solid;
    border-color:transparent transparent #fff;
    position: absolute;
    top: -0.3rem;
    left: 50%;
    margin-left: -0.5rem;
  }
  .titleTag {
    float: left;
    text-align: center;
    padding: 0.75rem 0;
    background: #fff;
    position: relative; 
    font-family: "PingFangSC-Regular";
    .data-download{
      border-radius: 5%;
      box-shadow: 1px 1px 8px rgba(153, 153, 153, 0.48);
      position: absolute;
      background: white;
      padding: 5px 0 5px 3px;
      z-index: 999;
      height: 126px;
      box-sizing: border-box;
      top: 3rem;
      left: -1rem;
      li{
        line-height: 38px;
        text-align: center;
        font-size: 12px;
        height: 38px;
        width: 120px;
        color: #333;
        border-bottom: 1px solid #f1f1f1;
        &:last-child{
          border: none;
        }
      }
    }
    &.active {
      color: #fc9400;
      border-bottom:1px solid #fc9400;
      .arrow{
        border-color: #fc9400;
        transition: all 0.3s;
      }
    }
    &.is-selected{text-indent: -0.6rem;}
    .arrow{
      position: absolute;
      right: 0.25rem;
      width: 0.3rem;
      height: 0.3rem;
      top: 50%;
      margin-top: -0.25rem;
      border: 1px solid #666;
      transform: rotateZ(45deg);
      padding: 1px;
    }
    .arrow.up{
      border-right: none;
      border-bottom: none;
      margin-top: -1px;
    }
    .arrow.down{
      border-left: none;
      border-top: none;
    }
  }

  .wrapList {
    background: #fff;
    // min-height: 1500px;
    // margin-top:5px;
    font-family: "MicrosoftYaHei";
    font-size: 0.7rem;
     color: #666666;
  }
  .bottom-empty {
    height: 2.5rem;
    background: #fff;
  }
  .tag1 > div, .tag2 > div, .tag3 > div{
    padding: 1.0rem;
    margin: 0 0.75rem;
    border-bottom: 1px solid #f1f1f1;
    color: #666666;
    position: relative;
    font-size: 0.7rem;
    &:before {
      content: '';
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      background: #999999;
      position: absolute;
      left: 0;
      top: 45%;;
    }
  }
</style>

<style scoped lang="less">

/*@import "../../../styles/baseVar.less";*/
  .newsCn{
    padding: .75rem;
    display: block;
    border-bottom: 1px solid #f4f4f4;
    font-family: 'PingFang SC';
    .newsLis{
      position: relative;
      height: 4.7rem;
      .newsLis_lf{
        position: absolute;
        left: 0;
        top:0;
        width: 7.2rem;
        height: 4.7rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .newsLis_rt{
        height: 4.7rem;
        position: absolute;
        left: 7.95rem;
        right: 0;
        p{
          color: #000;
          font-size: 0.85rem;
          line-height: 1.3;
        }
        p.newsLis_rt_body,p.newsLis_rt_head{
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: auto;
          -webkit-line-break: auto;
          -webkit-box-orient: vertical;
        }
        p.newsLis_rt_body{
          color: #999;
          font-size: 0.65rem;
          margin-top: 0.2rem;
          position: absolute;
          bottom: 0;
        }
        p.right-footer{
          color: #999;
          font-size: 0.6rem;
          position: absolute;
          bottom: 0;
          span{
            b{
              font-weight: 300;
            }
            b:nth-child(1){
              color: #000;
            }
          }
          span:nth-child(1){
            margin-right: 1.5rem;
          }
        }
      }
    }
  }
  .newsCn:last-child{
    border-bottom: 0;
  }
</style>
